<template>
	<view class="page-bg">
		<view class="pad-left-right-24 pad-top-30">
			<view class="bg-white pad-30 mar-bottom-30 font-28 radius20">
				<view class="color-text font-w-500">XXXX小区XX单元XXXX号</view>
				<view class="mar-top-24 color-646464">上次抄表：669m³</view>
				<view class="color-646464">可用余额：1888</view>
			</view>
			<view class="bg-white pad-left-right-24 pad-top-bottom-30 radius20">
				<view class="title font-28 font-w-500">收费规则</view>
				<view class="font-28 color-text mar-top-24 centerXY betweenX">
					<view class="color-646464">水资源费</view>
					<view class="color-646464">0.5元/立方米</view>
				</view>
				<view class="font-28 color-text mar-top-24 centerXY betweenX">
					<view class="color-646464">水资源费</view>
					<view class="color-646464">1.0元/立方米</view>
				</view>
			</view>
		</view>

		<view class="button-bottom">
			<view class="button-style">历史账单</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const value = ref("")
	const hanldeEnntrance = () => {
		uni.navigateTo({
			url: '/pages/entrance/entrance'
		})
	}

	const hanldeAccount = () => {
		uni.navigateTo({
			url: '/pages/my_actions/my/my'
		})
	}
</script>

<style scoped lang="scss">
	.page-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/111ba83702f882f08421c066eb85f6f6.png');
		background-size: 100% 526rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		background-position: 0rpx -70rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.title {
		position: relative;
		padding-left: 30rpx;
	}

	.title::after {
		content: '';
		position: absolute;
		width: 7rpx;
		height: 26rpx;
		background: #0099DE;
		border-radius: 4rpx;
		left: 0rpx;
		top: 50%;
		margin-top: -13rpx;
	}

	.button-bottom {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		padding: 30rpx 48rpx;
		box-sizing: border-box;
		background-color: white;

		.button-style {
			padding: 20rpx 0;
			text-align: center;
		}
	}
</style>